<!--
 * @Descripttion: 
 * @version: 1.0
 *@Deginer:jeking
 * @Date: 2024-11-11 11:06:21
 * @LastEditTime: 2024-11-20 18:24:27
 * @Github: https://github.com/xuxiaowengit
-->

<template>
  <div class=" container  login-wrap">

    <section>
      <div class="wave">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </section>

    <div class="login">
      <div class="logdiv">
        <img class="loginLogo" src="~@/assets/svg/wicpower.svg" alt="Wic-Power EMS DataV" />
      </div>
      <div class="loginTitle">
        <h1 class="title glowing-text">
          Energy Management System DataV&#x1F50B;
        </h1>
      </div>
      <el-form class="form" :model="model" :rules="rules" ref="loginForm">
        <el-form-item class="el-form-item" prop="userName">
          <!-- :placeholder="$t('login.username')" -->
          <el-input class="text  " v-model="model.userName" prefix-icon="User" :placeholder="$t('login.username')"
            clearable />
        </el-form-item>
        <el-form-item class="el-form-item" prop="password">
          <!-- :placeholder="$t('login.password')"  -->
          <el-input class="text  " v-model="model.password" prefix-icon="Lock" :placeholder="$t('login.password')"
            show-password clearable />
        </el-form-item>
        <!-- 引入验证码组件 -->
        <!-- 添加验证码表单项 -->
        <Captcha v-model="model.captcha" />
        <el-form-item class="el-form-item">

          <el-button :loading="loading" type="primary" class="btn" size="large" @click="submit">
            {{ btnText }}&#x26A1;
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="change-lang ">
      <change-lang />
    </div>

    <canvas ref="canvas" id="canvas" class="canvas"
      style="position: absolute; top: 0; left: 0; z-index: -1; pointer-events: none;">您的浏览器版本过低，请更换浏览器！</canvas>

    <Footer />
  </div>
</template>

<script>
import {
  defineComponent,
  getCurrentInstance,
  reactive,
  toRefs,
  ref,
  computed,
  onMounted,
  onBeforeUnmount,
  watch,
} from 'vue'

import { Login } from '@/api/login'
import { useRouter, useRoute } from 'vue-router'
import ChangeLang from '@/layout/components/Topbar/ChangeLang.vue'
import useLang from '@/i18n/useLang'
import { useApp } from '@/pinia/modules/app'
import { initMeteorEffect } from './start';

// main.js 或其他模块文件
import { initSpiderWeb } from './spider'; // 根据实际路径导入

// 引入 Footer 组件
import Footer from '@/components/copyRight/copyRight.vue'

// 引入验证码组件
import Captcha from "@/components/captcha/captcha.vue";

// 默认暴露接口
export default defineComponent({
  components: { ChangeLang, Footer, Captcha },
  name: 'login',
  setup() {

    // 以下是原代码不要删---------------------------------------------
    const { proxy: ctx } = getCurrentInstance() // 可以把ctx当成vue2中的this
    const router = useRouter()
    const route = useRoute()
    const { lang } = useLang()
    watch(lang, () => {
      state.rules = getRules()
    })
    const getRules = () => ({
      userName: [
        {
          required: true,
          message: ctx.$t('login.rules-username'),
          trigger: 'blur',
        },
      ],
      password: [
        {
          required: true,
          message: ctx.$t('login.rules-password'),
          trigger: 'blur',
        },
        {
          min: 6,
          max: 12,
          message: ctx.$t('login.rules-regpassword'),
          trigger: 'blur',
        },
      ],
      // 新增验证码字段的验证规则
      captcha: [
        {
          required: true,
          message: ctx.$t('login.rules-captcha'), // 提示用户输入验证码
          trigger: 'blur',
        },
      ],
    })
    const state = reactive({
      model: {
        userName: '',
        password: '',
        captcha: '', // 新增验证码字段
      },
      rules: getRules(),
      loading: false,
      btnText: computed(() =>
        state.loading ? ctx.$t('login.logining') : ctx.$t('login.login')
      ),
      loginForm: ref(null),
      submit: () => {

        if (state.loading) {
          return
        }
        state.loginForm.validate(async valid => {
          // console.log('提交的内容:', state.model); // 打印提交的内容
          // console.log('提交的内容:', state.model); // 打印提交的内容
          if (valid) {
            state.loading = true
            const { code, data, message } = await Login(state.model)
            if (+code === 200) {
              ctx.$message.success({
                message: ctx.$t('login.loginsuccess'),
                duration: 1000,
              })
              const targetPath = decodeURIComponent(route.query.redirect)
              if (targetPath.startsWith('http')) {
                // 如果是一个url地址
                window.location.href = targetPath
              } else if (targetPath.startsWith('/')) {
                // 如果是内部路由地址
                router.push(targetPath)
              } else {
                router.push('/')
              }
              useApp().initToken(data)
            } else {
              ctx.$message.error(message)
            }
            state.loading = false
          }
        })
      },
    })

    return {
      ...toRefs(state),
      model: state.model, // 确保 model 被正确暴露
    }
    // 以上是原代码不要删---------------------------------


  }, methods: {
    show() {
    }
  },
  mounted() {

    this.show()
    // 启动蜘蛛网特效
    initSpiderWeb();

    // 使用 `ref` 获取 canvas 元素，传入组件中的 canvas 引用
    const canvas = this.$refs.canvas;

    // 初始化流星雨效果，传入 canvas 的 id 和数量
    initMeteorEffect(canvas.id, 5); // 例如，创建 5 个流星
  }
})


</script>

<style lang="scss" scoped>
@import './login.scss'; //导入外部样式文件

* {
  font-family: 'Helvetica', 'Arial', sans-serif;
}

.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.content {
  flex-grow: 1;
}
</style>
